import React, { useEffect, useState } from "react";
//导入 PubSub
import PubSub from 'pubsub-js';
//导入 axios 
import axios from 'axios';

export default function List() {
  //定义一个状态 表示英雄的数据
  let [heros, setHeros] = useState([]);
  //定义状态, 表示是否为第一次
  let [isFirst, setIsFirst] = useState(true);
  //定义状态, 表示是否正在加载中...
  let [isLoading, setIsLoading] = useState(false);
  //组件挂载完毕
  useEffect(() => {
    //订阅 keyword 频道
    PubSub.subscribe('keyword', async (name, data) => {
      //更新状态
      setIsLoading(true);
      //发送 AJAX 请求, 获取英雄数据
      let result = await axios.get('http://api.xiaohigh.com/heros', {
        params: {
          name_like: data
        }
      });
      //输出结果
      // console.log(result);
      //更新状态
      setHeros(result.data);
      //更新 first 状态为 false
      setIsFirst(false);
      //
      setIsLoading(false);
    });
  }, [])

  return (
    <div className="hero-list">
      {/* 加载中  提示 */}
      {isLoading && <h3 style={{textAlign: 'center'}}>加载中...</h3>}
      {/* 空状态 */}
      {heros.length === 0 && !isFirst &&<h3 style={{textAlign: 'center'}}>暂无数据</h3>}
      {/* 欢迎语 */}
      {isFirst && <h3 style={{textAlign: 'center'}}>欢迎来到王者荣耀</h3>}
      {/* 单个的英雄结构 */}
      {heros.map((item) => {
        return (
          <div key={item.id} className="hero-item">
            <img src={"http://cdn.xiaohigh.com" + item.image} alt="" />
            <p>{item.name}</p>
          </div>
        );
      })}
    </div>
  );
}
